<%@ page contentType="text/html; charset=utf-8"%>
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<%@ taglib uri="http://www.springframework.org/tags" prefix="spring"%>
<%@ taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
<%@taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<c:set var="basePath" value="${pageContext.request.contextPath}"/>
<!DOCTYPE HTML>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>uptArticle</title>
    <script src="../../plugins/jquery.1.12.4.min.js"></script>
    <link rel="stylesheet" href="../../plugins/bootstrap-3.3.0/css/bootstrap.min.css">
    <script src="../../plugins/bootstrap-3.3.0/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="../../plugins/bootstrap-table-1.11.0/bootstrap-table.min.css">
    <script src="../../plugins/bootstrap-table-1.11.0/bootstrap-table.min.js"></script>
    <link href="../../plugins/waves-0.7.5/waves.min.css" rel="stylesheet"/>
    <link href="../../plugins/malihu-custom-scrollbar-plugin/jquery.mCustomScrollbar.min.css" rel="stylesheet"/>
    <script src="../../plugins/malihu-custom-scrollbar-plugin/jquery.mCustomScrollbar.concat.min.js"></script>
    <script src="../../plugins/waves-0.7.5/waves.min.js"></script>
    <script src="../../plugins/bootstrap-table-1.11.0/locale/bootstrap-table-zh-CN.min.js"></script>
    <link rel="stylesheet" href="../../plugins/jquery-confirm/jquery-confirm.min.css">
    <script src="../../plugins/jquery-confirm/jquery-confirm.min.js"></script>
    <link rel="stylesheet" href="../../css/metroStyle/metroStyle.css" type="text/css">
    <script type="text/javascript" src="../../js/jquery.ztree.core.js"></script>
    <script type="text/javascript" src="../../js/jquery.ztree.excheck.js"></script>
    <script type="text/javascript" src="../../js/jquery.ztree.exedit.js"></script>

    <link rel="stylesheet" href="../../plugins/editormd/lib/codemirror/codemirror.min.css">
    <script src="../../plugins/editormd/editormd.min.js"></script>
    <link rel="stylesheet" href="../../plugins/editormd/css/editormd.min.css">
    <link rel="stylesheet" href="../../plugins/select2/css/select2.min.css">
    <script src="../../plugins/select2/js/select2.min.js"></script>
    <link rel="stylesheet" href="../../plugins/awesome-bootstrap-checkbox/awesome-bootstrap-checkbox.css">
    <script src="../../plugins/jquery.cookie.js"></script>

    <script src="../../js/common.js"></script>
    <style>
        #main{padding:1% 2% 2%;background-color: #f5f5f5;}
        .form-group{padding: 10px 20px 0 20px}
    </style>
</head>
<body>
<div id="main">
    <input id="uptTitle" type="text" placeholder="   请输入文章标题,不要超过60个字符" style="width: 99.8%;height:35px;border: 1px solid grey;">

    <div class="editormd" id="test-editormd">
        <textarea id="articleContent" class="editormd-markdown-textarea" name="test-editormd-markdown-doc"></textarea>
        <!-- 第二个隐藏文本域，用来构造生成的HTML代码，方便表单POST提交，这里的name可以任意取，后台接受时以这个name键为准 -->
        <textarea id="articleHtml" class="editormd-html-textarea" name="content"></textarea>
    </div>

    <input id="uptDescription" type="text" placeholder="  简介" style="width: 1570px;height:35px;border: 1px solid grey;">

    <input id="uptKeywords" type="text" placeholder="  关键字" style="width: 1570px;height:35px;border: 1px solid grey;margin-top: 10px;">
    <input id="uptCover_image" type="text" placeholder="  图片" style="width: 1570px;height:35px;border: 1px solid grey;margin-top: 10px;">
    <hr>
    <div style="border: 2px solid green;width: 370px;height:85px;">
        <tr>
            <td align="right"><h3 style="display: inline-block"><span class="label label-success">类别</span></h3></td>
            <td>
                <select class="combox" id="sel_productTag" name="recommenderId" multiple>
                </select>
            </td>
        </tr>
    </div>
    <hr>

    <div class="form-group" style="display: inline-block;border: 2px solid green;">
        <label >状态</label>
        <div class="radio">
            <div class="radio radio-inline radio-success">
                <input id="uptStatus_0" type="radio" name="uptStatus" value="0" checked>
                <label for="uptStatus_0">正常 </label>
            </div>
            <div class="radio radio-inline">
                <input id="uptStatus_1" type="radio" name="uptStatus" value="1">
                <label for="uptStatus_1">锁定 </label>
            </div>
        </div>
    </div>

    <div class="form-group" style="display: inline-block;border: 2px solid green;">
        <label >是否推荐</label>
        <div class="radio">
            <div class="radio radio-inline radio-success">
                <input id="uptRecommended_0" type="radio" name="uptRecommended" value="0" checked>
                <label for="uptRecommended_0">正常 </label>
            </div>
            <div class="radio radio-inline">
                <input id="uptRecommended_1" type="radio" name="uptRecommended" value="1">
                <label for="uptRecommended_1">锁定 </label>
            </div>
        </div>
    </div>

    <hr>
    <button id="uptArticle" type="button" class="btn btn-primary" style="display: block;margin-left:1200px;">
        确定修改
    </button>
</div>

<script>
    row = $(window.parent.document).contents().find("#frame__article_index")[0].contentWindow.ff;
    $(function () {
        $('#uptTitle').val(row[0].title);
        $("#uptCover_image").val(row[0].cover_image);
        $("#articleContent").val(row[0].content);
        $("#uptDescription").val(row[0].description);
        $("#uptKeywords").val(row[0].keywords);
        var setStatus = row[0].status;
        if(setStatus == 0){
            $("#uptStatus_0").prop("checked", true);
        }else if(setStatus == 1){
            $('#uptStatus_1').prop("checked", true);
        }

        var setRecommended = row[0].recommended;
        if(setRecommended == 0){
            $("#uptRecommended_0").prop("checked", true);
        }else if(setRecommended == 1){
            $('#uptRecommended_1').prop("checked", true);
        }
    })

    editormd("test-editormd", {
        width   : "90%",
        height  : 440,
        emoji: true,
        markdown: "### 动态创建 Editor.mdDynamic create Editor.md",
        syncScrolling : "single",
        path    : '../../plugins/editormd/lib/',
        //这个配置在simple.html中并没有，但是为了能够提交表单，使用这个配置可以让构造出来的HTML代码直接在第二个隐藏的textarea域中，方便post提交表单。
        saveHTMLToTextarea : true
    });

    $('#sel_productTag').select2({
        placeholder: "请至少选择一个选项",
        tags:true,
        createTag:function (decorated, params) {
            return null;
        },
        width:'256px'
    });

    var typeIds = row[0].type_id;
    var typeId = typeIds.split(",");
    $(".subOption").remove();
    $.ajax({
        type:'get',
        url:'${basePath}/type/list?offset=10&limit=10',
        dataType:'json',
        success:function (data) {
            var list = data.rows;
            for(var i = 0;i<list.length;i++){
                var option = "<option id="+list[i].id+' class="subOption"'+" value=\"mingren\">"+list[i].name+"</option>";
                for(var j=0;j<typeId.length;j++){
                    if(typeId[j] == list[i].id){
                        option = "<option id="+list[i].id+' class="subOption"'+" value=\"mingren\" selected>"+list[i].name+"</option>";
                    }
                }
                $("#sel_productTag").append(option);
            }
            /*for(var i = 0;i<list.length;i++){
                $("#sel_productTag").append("<option id="+list[i].id+' class="subOption"'+" value=\"mingren\">"+list[i].name+"</option>");
            }*/
        }
    });

    $("#uptArticle").on("click",function(){
        var uptTitle = $("#uptTitle").val();
        var uptCover_image = $("#uptCover_image").val();
        var uptDescription = $("#uptDescription").val();
        var uptKeywords = $("#uptKeywords").val();
        var uptContent = $("#articleContent").val();
        var uptTypeId ="";
        $("#sel_productTag").find("option:selected").each(function () {
            uptTypeId += $(this).attr('id') + ",";
        })
        uptTypeId = uptTypeId.substr(0, uptTypeId.length - 1);
        var uptStatus = $('input:radio[name="uptStatus"]:checked').val();
        var uptRecommended = $('input:radio[name="uptRecommended"]:checked').val();

        var article = {id:row[0].id,user_id:${sessionScope.userId},title:uptTitle,cover_image:uptCover_image,content:uptContent,type_id:uptTypeId,status:uptStatus,recommended:uptRecommended,description:uptDescription,keywords:uptKeywords};
        $.ajax({
            url:'${basePath}/article/update',
            type:"post",
            dataType:'json',
            data:article,
            success:function (result) {
                if (result.result == "success"){
                    $('#tab__article_uptArticle', window.parent.document).remove();
                    $('#table', window.parent.document).bootstrapTable('refresh');
                    parent.window.Tab.addTab('文章管理', '/article/index');
                    var $iframe = $('#iframe__article_index', window.parent.document).find('iframe');
                    $iframe.attr('src', $iframe.attr('src'));
                }else{
                    alert("fail");
                }
            }
        })
    })
    
</script>
</body>

</html>